<!-- 
	报价表 item 
-->
<template>
    <view class="quotation-item">
        <view class="quotation-item-top">
            <text class="pro-number">货号：{{ item.SkuCode }}</text>
            <view class="status-box">
                <view
                    class="status-doc"
                    :class="{
                        yellow: this.item.State == 0,
                        green: this.item.State == 1,
                        red: this.item.State == 2,
                        gray: this.item.State == 3,
                    }">
                </view>
                <text class="status-text">{{ getStatusText() }}</text>
            </view>
        </view>
        <view class="quotation-item-main">
            <image mode="aspectFill" class="pro-image" :src="easyGetImgUrl(item.ProductImage)"></image>
            <view class="pro-info">
                <text class="pro-title">{{ item.ProductName }}</text>
                <text class="pro-desc" v-if="item.Attribute">规格：{{ item.Attribute }}</text>
                <view class="pro-price">
                    <text class="price-text">￥{{ item.Price }}</text>
                    <text class="small-text">/{{ item.UnitName }}</text>
                </view>
            </view>
        </view>
        <view class="quotation-item-bottom">
            <text class="quotation-time">报价时间：{{ item.AddTime }}</text>
            <button v-if="item.State != 1" class="btn btn-main-hollow btn-quotation" @click.stop="clickFn()">
                {{ item.State == 0 ? "撤回" : "修改" }}
            </button>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        item: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            price: "",
        }
    },
    mounted() {},
    methods: {
        clickFn() {
            if (this.item.State == 0) {
                this.recallFn()
            } else if (this.item.State == 2 || this.item.State == 3) {
                this.quotationFn()
            }
        },
        recallFn() {
            this.$emit("recall", this.item)
        },
        quotationFn() {
            this.$emit("quotation", this.item)
        },
        getStatusText() {
            let state = this.item.State
            let text = ""
            switch (state) {
                case 0:
                    text = "待审核"
                    break
                case 1:
                    text = "已同意"
                    break
                case 2:
                    text = "已驳回"
                    break
                case 3:
                    text = "草稿"
                    break
                default:
                    break
            }
            return text
        },
    },
}
</script>

<style lang="scss">
.quotation-item {
    padding: $app-page-padding;
    background: #ffffff;
    border-radius: 12rpx;
    margin: $app-page-padding $app-page-padding 0;

    .quotation-item-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16rpx;

        .pro-number {
            color: #0091ff;
            font-size: $font-size-28;
        }

        .pro-status {
            color: $app-color-main;
            font-size: $font-size-26;
        }

        .offline-text {
            color: #999999;
        }

        .status-box {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 44rpx;
            width: 150rpx;
            justify-content: center;
            background: #f3f3f4;
            border-radius: 40rpx;

            .status-doc {
                width: 8rpx;
                height: 8rpx;
                border-radius: 50%;
                margin-right: 10rpx;
            }

            .green {
                background: #12be73;
            }

            .red {
                background: #e52d4d;
            }

            .yellow {
                background: #ffbd00;
            }

            .gray {
                background: #b2b2b2;
            }
        }
    }

    .quotation-item-main {
        display: flex;
        flex-direction: row;

        .pro-image {
            width: 160rpx;
            height: 160rpx;
            border-radius: 8rpx;
            margin-right: $app-page-padding;
        }
    }

    .quotation-item-bottom {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        min-height: 50rpx;
        .quotation-time {
            flex: 1;
        }

        .btn-quotation {
            width: 160rpx;
            height: 64rpx;
            font-weight: normal;
            font-size: $font-size-28;
        }
    }
}

.pro-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .pro-title {
        font-size: $font-size-30;
        margin-bottom: 10rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
    }

    .pro-desc {
        color: $app-color-text-tip;
        margin-bottom: 10rpx;
    }

    .pro-price {
        display: flex;
        flex-direction: row;
        align-items: center;

        .small-text {
            color: $app-color-text-main;
        }

        .price-text {
            font-size: $font-size-36;
            margin-right: 10rpx;
            font-weight: bold;
            color: $app-color-text-main;
        }

        .del-text {
            color: #999999;
        }
    }
}
</style>
